<template>
  <div class="content">
    <!--材料明细弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.materDetail')"
      model
      :visible.sync="isdeliverlDialog"
      :close-on-click-modal="false"
      width="80%"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <span class="materiel-code">{{ $t('market.staff') }}<!--名称--></span>
        <el-input v-model.trim="deliver.fpurchaser" class="input-width" size="mini" @keyup.enter.native="queryFheadDelivery" />

        <span class="materiel-code">{{ $t('market.atherNumber') }}<!--名称--></span>
        <el-input v-model.trim="deliver.faternumber" class="input-width" size="mini" @keyup.enter.native="queryFheadDelivery" />

        <span class="materiel-code">{{ $t('market.productmodel1') }}<!--名称--></span>
        <el-input v-model.trim="deliver.fatermodel" class="input-width" size="mini" @keyup.enter.native="queryFheadDelivery" />
        <el-button size="mini" type="primary" @click="queryFheadDelivery">{{ $t('btn.search') }}</el-button>
        <el-button size="mini" type="primary" @click="handleExport">{{ $t('btn.toExcel') }}</el-button>
      </div>
      <div>
        <jc-table
          :table-data="deliverlDialogData"
          :table-header="deliverDialogHeader"
          table-height="73vh"
          serial
        >
          <template v-slot:billSlot="col">
            <span v-if="col.scope.row.actualqty>0" style="color: #e6a23c">{{ col.scope.row.actualqty }}</span>
            <span v-else>{{ col.scope.row.actualqty }}</span>
          </template>
        </jc-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { querySalDedailRawMaterial } from '@/api/marketManage/marketOrder'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'

export default {
  props: {
    listData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      // 交货方式
      isdeliverlDialog: true,
      deliver: {
        fpurchaser: '',
        fatermodel: '',
        faternumber: ''
      },
      deliverlDialogData: [],
      deliverDialogHeader: [
        { label: this.$t('market.productmodel1'), prop: 'fatermodel' },
        { label: this.$t('market.atherNumber'), prop: 'faternumber', width: '120' },
        { label: this.$t('market.atherName'), prop: 'fatername', width: '100' },
        { label: this.$t('market.atherSpecifica'), prop: 'faterspecification', width: '130' },
        { label: this.$t('market.materNumber'), prop: 'fnumber', width: '120' },
        { label: this.$t('market.materName'), prop: 'fname', width: '100' },
        { label: this.$t('market.materSpecif'), prop: 'fspecification', width: '130' },
        { label: this.$t('shop.price1'), prop: 'fprice' },
        { label: this.$t('market.priceunit'), prop: 'fpriceunit' },
        { label: this.$t('market.preqty'), prop: 'preqty' },
        { label: this.$t('market.storageUnit'), prop: 'preunit' },
        { label: this.$t('market.actualqty'), prop: 'actualqty' },
        { label: this.$t('market.actualunit'), prop: 'actualunit' },
        { label: this.$t('market.staff'), prop: 'fpurchaser' },
        { label: this.$t('market.rukufqty'), prop: 'inqty' },
        { label: this.$t('market.inutit'), prop: 'inutit' },
        { label: this.$t('market.stockQty'), prop: 'fbaseqty' },
        { label: this.$t('market.stockUnit'), prop: 'fbaseunit' }
      ],
      prodValue: { fdataValue: '', fheadDeliveryWay: '', isdeliverlDialog: true }
    }
  },
  created() {
    this.queryFheadDelivery()
  },
  methods: {
    // 材料明细
    async queryFheadDelivery() {
      this.isdeliverlDialog = true
      const DATA = {
        ...this.deliver,
        list: this.listData
      }
      const { data: RES } = await querySalDedailRawMaterial(DATA)
      this.deliverlDialogData = RES
    },
    // 关闭前回调
    handleClose() {
      this.prodValue.isdeliverlDialog = false
      this.$emit('delive', {})
    },
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.deliverDialogHeader.map((res) => {
          return res.label
        })
        const filterVal = this.deliverDialogHeader.map((res) => {
          return res.prop
        })
        if (this.deliverlDialogData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          const list = this.deliverlDialogData
          const data = formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '材料明细')
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
